 // 获得所有待轮播的内容
 var itemLiArr = document.querySelectorAll(".item li");
 // 记录当前索引
 var index = 0;
 // 分页导航
 var pageDom = document.querySelector(".page");
 var pageLiArr = document.querySelectorAll(".page li");



 // 初始化事件，上一张，下一张
 initEvent();
 // 初始化页面导航，给导航添加属性索引
 initPage();
 
 // 初始化定时器
 initTimer();



 // =====
 function initTimer(){
   // 加入定时器
   // var timer = setInterval(function(){
   //   onNext();
   // },2000)
   var timer = setInterval(onNext,2000);

   // 鼠标划入，清除定时器
  //  document.querySelector(".box").onmouseenter=function(){
  //    clearInterval(timer);
  //  }
   // 鼠标离开，恢复定时器
  //  document.querySelector(".box").onmouseleave=function(){
  //    timer = setInterval(onNext,2000);
  //  }
 }
 // 初始化页面导航
 function initPage(){
   // 鼠标移入导航索引
   
   // onmouseenter没有事件冒泡
   // pageDom.onmouseenter=function(e){
   //   console.log(e.target);
   //   console.log(this);
   // }
   // 为所有的分页li，加上位置属性，方便后面获取索引
   
   pageLiArr.forEach((item,index)=>{
     item.setAttribute("pos",index);
   })
 }
 // 初始化事件
 function initEvent(){
   // 下一张
   // rightBtn.onclick=function(){
   //   onNext();
   // }
   rightBtn.onclick=onNext;
   

   // 上一张
   leftBtn.onclick=function(){
     // 不选择index所在的图片，下标
     noSelect(index);
     // 显示下个内容
     index--;
     // 判断是否超出索引
     if(index == -1){
       // 超出索引，回到最后一个
       index = itemLiArr.length-1;
     }
     // 选择index所在的图片，下标
     onSelect(index);
   }
   // 鼠标移入页面索引
   pageDom.onmouseover=function(e){
     // 鼠标划过，没有进入li，忽略
     // 嵌套越少越好
     if(e.target.tagName != "LI"){
       return;
     }
     //保证进入了li
     // 获取li的pos属性
     var pos = e.target.getAttribute("pos");
     noSelect(index);
     // 显示目标内容
     index = pos;
     onSelect(index)
   }
 }
 // 下一张的逻辑
 function onNext(){
   // 不选择index所在的图片，下标
   noSelect(index);
   // 显示下个内容
   index++;
   // 判断是否超出索引
   if(index == itemLiArr.length){
     // 超出索引，回到第一个
     index = 0;
   }
   // 选择index所在的图片，下标
   onSelect(index);
 }
 // 不选择index所在的图片，下标
 function noSelect(index){
   // 隐藏当前内容
   animate(itemLiArr[index],{opacity:0});
   // 取消分页焦点
   pageLiArr[index].style.backgroundColor="#ccc";
 }

 // 选择index所在的图片，下标
 function onSelect(index){
   // 隐藏当前内容
   animate(itemLiArr[index],{opacity:1});
   // 取消分页焦点
   pageLiArr[index].style.backgroundColor="black";
 }